<template>
    <ScaleBox :width="1920" :height="1080" bgc="#0a1b20">
        <heads />
        <div class="content">
            <!-- top -->
            <div class="betweenX">
                <div class="centerXY">
                    <div class="centerXY back" @click="hanldeBack">
                        <el-icon>
                            <ArrowLeft />
                        </el-icon>
                        返回
                    </div>
                    <div class="mar-l-30 title">
                        {{ areaData.areaName }}
                    </div>
                </div>
                <!-- <div class="history">历史预警情况</div> -->
            </div>

            <!-- bottom -->
            <div class="flex">
                <div class="bottom-left">
                    <div class="number-box centerY mar-t-36">
                        <div class="text">
                            <div class="">当前人员数量</div>
                            <div class="font-s-28">{{ numObject.total }}</div>
                        </div>
                        <div class="text">
                            <div class="">流动人口数量</div>
                            <div class="font-s-28">{{ numObject.flowTotal }}</div>
                        </div>
                        <div @click="hanldeCirclePlus" class="add centerY">
                            <el-icon class="mar-r-10" size="28px" color="#0bb8af">
                                <circlePlus />
                            </el-icon>
                            新增短信模版
                        </div>
                    </div>
                    <div>
                        <el-table :data="mssList" height="160" style="width: 100%">
                            <el-table-column label="区域风险级别" width="180">
                                <template #default="scope">
                                    <span v-if="scope.row.riskLevel == 1">风险区一级预警</span>
                                    <span v-else-if="scope.row.riskLevel == 2">风险区二级预警</span>
                                    <span v-else-if="scope.row.riskLevel == 3">风险区三级预警</span>
                                </template>

                            </el-table-column>
                            <el-table-column prop="name" label="目标人员" width="180">
                                <template #default="scope">
                                    <span v-if="scope.row.riskLevel == 1">风险区域全部人员</span>
                                    <span v-else-if="scope.row.riskLevel == 2">内圈区域全部人员</span>
                                    <span v-else-if="scope.row.riskLevel == 3">风险区域负责人</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="address" label="编辑">
                                <template #default="scope">
                                    <div class="centerXY">
                                        <div @click="hanldeDelete(scope.row.id)" class="centerXY icon-button">
                                            <el-icon>
                                                <Delete />
                                            </el-icon>
                                            删除
                                        </div>
                                        <div @click="hanldeEditTemplate(scope.row)" class="centerXY mar-l-10 icon-button">
                                            <el-icon>
                                                <Edit />
                                            </el-icon>
                                            修改
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="address" label="操作">
                                <template #default="scope">
                                    <div @click="hanldeSendSms(scope.row.id)" class="centerXY icon-button">
                                        <el-icon>
                                            <Position />
                                        </el-icon>
                                        发送短信
                                    </div>

                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="echarts mar-t-20">
                        <div class="right">
                            <el-select suffix-icon="CaretBottom" @change="hanldeSelect" size="large" v-model="trendValue"
                                value-key="id">
                                <el-option v-for="item in trendOpti" :key="item.id" :label="item.label" :value="item.id" />
                            </el-select>
                        </div>
                        <div id="foldLine" style="width: 100%;height: 300px;"></div>
                        <div id="pie" class="mar-t-32" style="width: 100%;height: 200px;"></div>
                    </div>
                </div>
                <div class="bottom-right mar-l-32 mar-t-36">
                    <div class="map">
                        <baidu-map @ready="createMap" :scroll-wheel-zoom="true" :double-click-zoom="true" class="map-box"
                            :center="{ lng: lng, lat: lat }" :zoom="14">

                            <!-- 地图类型 -->
                            <!-- <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
                                anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type> -->

                            <!-- 放大 -->
                            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

                            <!-- 热力图 -->
                            <bml-heatmap  :data="data"
                                :max="100" :radius="20">
                            </bml-heatmap>

                            <!-- 点 -->
                            <bm-marker :position="{ lng: lng, lat: lat }" animation="BMAP_ANIMATION_BOUNCE">
                                <bm-info-window :show="true" @click="hanldeBmMarker">
                                    <div class="flex shou">
                                        <img v-if="areaCode == '510182A1'" class="map-icon"
                                            src="../../assets/images/hai.jpg" alt="">
                                        <img v-else-if="areaCode == '510182B3'" class="map-icon"
                                            src="../../assets/images/hua.jpg" alt="">
                                        <img v-else-if="areaCode == '510182B2'" class="map-icon"
                                            src="../../assets/images/bai.jpg" alt="">
                                        <div>
                                            <div class="mar-t-10">{{ areaData.areaName }}</div>
                                            <div class="centerXY betweenX mar-t-10">
                                                <div>实时人数：</div>
                                                <div>{{ areaData.total }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </bm-info-window>
                            </bm-marker>

                            <!-- 连线 -->
                            <bm-polygon fillColor="" :path="areaData.innerLnglatList" stroke-color="blue"
                                :stroke-opacity="0.5" :fillOpacity="0" :stroke-weight="4" :editing="false" />

                            <bm-polygon fillColor="" :path="areaData.outerLnglatList" stroke-color="red"
                                :stroke-opacity="1" :fillOpacity="0" :stroke-weight="4" :editing="false" />
                        </baidu-map>
                    </div>
                    <div class="table-box flex">
                        <div class="table-left">
                            <div class="title-box">
                                <div class="title-left">
                                    <img class="user-image" src="../../assets/images/user.svg" alt="">
                                    <div>预警后人员撤出情况</div>
                                </div>
                            </div>
                            <div class="mar-l-8 font-s-22 evaTotal">{{ evaTotal }}人</div>
                            <div id="warning" style="width: 100%;height: 200px;"></div>
                        </div>
                        <div class="tbale-right mar-l-36">
                            <rollTable :isPerson="true" :data="tableData"></rollTable>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ScaleBox>

    <!-- 弹窗 -->
    <el-dialog v-model="drawer" center title="短信通知" :with-header="false">
        <el-form ref="ruleFormRef" label-width="120px" size="large" :model="ruleForm" :rules="rules" class="demo-ruleForm">
            <el-form-item label="重点风险区域">
                <el-input disabled v-model="areaData.areaName" type="text" autocomplete="off">
                </el-input>
            </el-form-item>
            <el-form-item prop="riskLevel" label="区域风险级别">
                <el-select placeholder="请选择区域风险级别" size="large" v-model="ruleForm.riskLevel" value-key="id">
                    <el-option label="风险区三级预警" :value="3" />
                    <el-option label="风险区二级预警" :value="2" />
                    <el-option label="风险区一级预警" :value="1" />
                </el-select>
            </el-form-item>
            <el-form-item prop="sendType" label="发送类型">
                <el-select placeholder="请选择发送类型" v-model="ruleForm.sendType" value-key="id">
                    <el-option label="手动" value="auto" />
                    <el-option label="自动" value="order" />
                </el-select>
            </el-form-item>
            <el-form-item prop="targetPerson" label="目标人员">
                <el-select placeholder="请选择目标人员" v-model="ruleForm.targetPerson" value-key="id">
                    <el-option label="风险区域全部人员" :value="1" />
                    <el-option label="内圈区域全部人员" :value="2" />
                    <el-option label="风险区域负责人" :value="3" />
                </el-select>
            </el-form-item>
            <el-form-item prop="message" label="发送短信文案">
                <el-input placeholder="请输入短信文案" v-model="ruleForm.message" type="textarea" autocomplete="off">
                </el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="drawer = false">取消</el-button>
            <el-button type="primary" @click="submitForm(formRef)">确认</el-button>
        </template>
    </el-dialog>

    <el-dialog v-model="imgageDialog" center :title="areaData.areaName" :with-header="false" width="30%">
        <div>实时人数：{{ areaData.total }}</div>
        <div class="centerXY">
            <img v-if="areaCode == '510182A1'" class="imgageDialog" src="../../assets/images/hai.jpg" alt="">
            <img v-else-if="areaCode == '510182B3'" class="imgageDialog" src="../../assets/images/hua.jpg" alt="">
            <img v-else-if="areaCode == '510182B2'" class="imgageDialog" src="../../assets/images/bai.jpg" alt="">
        </div>
    </el-dialog>
</template>

<script setup>
import heads from '@/components/head/index.vue'
import ScaleBox from "vue3-scale-box";
import * as echarts from "echarts";
import { onMounted, ref, reactive } from 'vue';
import rollTable from '@/components/rollTable/index.vue';
import { useRouter } from "vue-router";
import { getStatistics, getFlowtrend, getTemplate, getTemplateList, getNotices, deleteTemplate, sendSms, editTemplate, getEvacuatePerson, areaList, heatMapList } from '@/api/dashboard.js'
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter();
import { BmlHeatmap } from 'vue-baidu-map-3x';


// 传参
let routerData = router.currentRoute.value.query;
let areaCode = routerData.code;
let lng = ref(routerData.lng);
let lat = ref(routerData.lat);
let editAdd = null;


// 点击地图点弹窗
let imgageDialog = ref(false);
const hanldeBmMarker = () => {
    imgageDialog.value = true;
}

// 默认混合地图
// const createMap = ({ BMap, map }) => {
//     map.setMapType(BMAP_HYBRID_MAP);
// }

let areaData = ref([]);
areaList().then(res => {
    res.data.forEach(item => {
        if (item.areaCode == areaCode) {
            areaData.value = item;
        }
    })
})

// 获取热力图
let data = ref([])
heatMapList({ areaCode }).then(res => {
    console.log(res);
    data.value = res.data.map(item => {
        return {
            lng: item.longitude,
            lat: item.latitude,
            count: item.cnt,
        }
    })
})


// form验证
const rules = reactive({
    riskLevel: [
        { required: true, message: '请选择风险等级', trigger: 'change' },
    ],
    sendType: [
        { required: true, message: '请选择发送类型', trigger: 'change' },
    ],
    targetPerson: [
        { required: true, message: '请选择目标人员', trigger: 'change' },
    ],
    message: [
        { required: true, message: '请输入短信文案', trigger: 'blur' },
    ]
})

// form数据
const ruleForm = reactive({
    title: routerData.name,
    riskLevel: '',
    sendType: '',
    targetPerson: '',
    message: '',
    areaCode
})

//  添加
let drawer = ref(false);
const hanldeCirclePlus = () => {
    editAdd = 'add';
    drawer.value = true;
}

// 点击添加模版
const ruleFormRef = ref(null)
const submitForm = () => {
    ruleFormRef.value.validate(valid => {
        if (valid) {
            // 添加
            if (editAdd == 'add') {
                getTemplate(ruleForm).then(res => {
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                        duration: 5 * 1000
                    })
                    // 清空输入
                    ruleFormRef.value.resetFields()
                    drawer.value = false;
                    getList();
                })
            } else {
                editTemplate(ruleForm).then(res => {
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                        duration: 5 * 1000
                    })
                    // 清空输入
                    ruleFormRef.value.resetFields()
                    drawer.value = false;
                    getList();
                })
            }
        }
    })
}

// 发送短信
const hanldeSendSms = (id) => {
    ElMessageBox.confirm('发送短信，您确定吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        sendSms({ smsTemplateId: id }).then(res => {
            getList();
            ElMessage({
                type: 'success',
                message: res.msg,
            })
        })
    }).catch(() => {
    })
}

// 获取短信模版列表
let mssList = ref([])
const getList = () => {
    getTemplateList({
        areaCode
    }).then(res => {
        mssList.value = res.data;
    })
}
getList();
// 删除模版
const hanldeDelete = (id) => {
    ElMessageBox.confirm('此操作将永久删除该数据，您确定吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        deleteTemplate({ id }).then(res => {
            getList();
            ElMessage({
                type: 'success',
                message: res.msg,
            })
        })
    }).catch(() => {
    })
}

// 修改模版
const hanldeEditTemplate = (row) => {
    ruleForm.riskLevel = row.riskLevel;
    ruleForm.sendType = row.sendType;
    ruleForm.targetPerson = row.targetPerson;
    ruleForm.message = row.message;
    ruleForm.id = row.id;
    drawer.value = true;
    editAdd = 'edit';
}

// 返回首页
const hanldeBack = () => {
    router.push({ path: '/' })
}

// 风险区人员流动趋势下拉数据
const trendValue = ref(1);
const trendOpti = ref([
    { id: 1, label: '5分钟' },
    { id: 2, label: '30分钟' },
    { id: 3, label: '1小时' }
])

// 表格数据
const tableData = ref([])
const getData = () => {
    getNotices({
        areaCode: areaCode
    }).then(res => {
        tableData.value = res.data;
    })
}

// 获取统计
let numObject = ref({})
getStatistics({
    areaCode: areaCode
}).then(res => {
    numObject.value = res.data;
    warningFnt();
})

// 切换数据
const hanldeSelect = (e) => {
    hanldeFoldLine(e);
}

// 风险区人员流动趋势
let foldLine = null;
const hanldeFoldLine = (e = 1) => {
    getFlowtrend({
        type: e,
        areaCode: areaCode
    }).then(res => {
        if (foldLine == null) {
            foldLine = echarts.init(document.getElementById("foldLine"));
        }

        let num = [];
        let time = [];
        res.data.forEach(item => {
            num.push(item.personTotal);
            time.push(item.time);
        });

        foldLine.setOption({
            grid: {
                left: '0%',
                right: '0%',
                bottom: '5%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: '#000',
                textStyle: {
                    color: '#00e5aa',
                    fontSize: 16
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: time,
                axisLabel: {
                    fontSize: 16,
                    color: '#ffffff',
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    fontSize: 16,
                    fontWeight: 'bold',
                    color: '#ffffff',
                }
            },
            series: [
                {
                    data: num,
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            {
                                offset: 0,
                                color: '#74c1bd'
                            }, {
                                offset: 1,
                                color: '#0bb8af'
                            }
                        ])
                    },
                    lineStyle: {
                        width: 1
                    }
                }
            ]
        });
    })
}

// 风险区人员实时来源分布占比
const warningFnt = () => {
    let pie = echarts.init(document.getElementById("pie"));
    pie.setOption({
        tooltip: {
            trigger: 'item',
        },
        legend: {
            top: 'center',
            left: 'left',
            orient: 'vertical',
            textStyle: {
                color: '#fff',
                fontSize: 16
            }
        },
        series: [
            {
                type: 'pie',
                radius: ['60%', '85%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderWidth: 6,
                    borderColor: '#1c3e51',
                    color: function (colors) {
                        var colorList = [
                            '#D45F36',
                            '#0bb8af',
                        ];
                        return colorList[colors.dataIndex];
                    }
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    scaleSize: 10,
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold',

                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: numObject.value.residentTotal, name: '流动人口' },
                    { value: numObject.value.flowTotal, name: '常住人口' },
                ]
            }
        ]
    });

}

// 预警后人员撤出情况
let evaTotal = ref('');

const hanldeGetPerson = () => {
    getEvacuatePerson({ areaCode }).then(res => {
        let { evacuateTotal, total } = res.data;
        evaTotal.value = evacuateTotal;
        let warning = echarts.init(document.getElementById("warning"));
        warning.setOption({
            tooltip: {
                trigger: 'item',
            },
            legend: {
                top: 'center',
                left: 'left',
                orient: 'vertical',
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                }
            },
            series: [
                {
                    type: 'pie',
                    center: ['70%', '50%'],
                    radius: ['60%', '85%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderWidth: 6,
                        borderColor: '#1c3e51',
                        color: function (colors) {
                            var colorList = [
                                '#0bb8af',
                                '#D45F36',

                            ];
                            return colorList[colors.dataIndex];
                        }
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        scaleSize: 10,
                        label: {
                            show: true,
                            fontSize: 20,
                            fontWeight: 'bold',

                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: total - evacuateTotal, name: '风险区内人员' },
                        { value: evacuateTotal, name: '预警撤出人员' },
                    ]
                }
            ]
        });
    })
}


onMounted(() => {
    // 表格
    getData();

    // 折线图
    hanldeFoldLine();

    // 预警后人员撤出情况
    hanldeGetPerson();

    // createMap();
});
</script>

<style lang="less" scoped>
.imgageDialog {
    width: 350px;
    height: 450px;
}

.icon-button {
    cursor: pointer;
    color: #0bb8af;
}

.map-icon {
    width: 80px;
    height: 120px;
}

.shou {
    cursor: pointer;
}

.content {
    /* display: flex; */
    padding: 16px 36px;
    background: url('../../assets/images/data-bg.jpeg') no-repeat;
    background-size: 100% 100%;
    color: @color-fff;
    box-sizing: border-box;

    .back {
        font-size: 18px;
        border: 3px solid #549c98;
        padding: 10px 16px;
        box-sizing: border-box;
        cursor: pointer;
    }

    .title {
        font-size: 18px;
        border: 3px solid #0bb8af;
        padding: 10px 16px;
        box-sizing: border-box;
    }

    .history {
        font-size: 18px;
        border: 3px solid #549c98;
        padding: 10px 16px;
        box-sizing: border-box;
    }
}

.bottom-left {
    width: 600px;

    .number-box {
        >div {
            flex: 1;
            justify-content: center;
        }

        .add {
            font-size: 22px;
            cursor: pointer;
        }
    }

    .echarts {
        width: 100%;
        height: 600px;
        background: url('../../assets/images/info-l.png') no-repeat;
        background-size: 100% 100%;
        padding: 16px;
        box-sizing: border-box;

        .right {
            display: flex;
            flex-direction: row-reverse;
        }

        :deep .el-table th.el-table__cell {
            background: transparent !important;
            border: 0 none;
        }

        :deep .el-input__wrapper {
            background: #0f2233 !important;
            border: 2px solid #0bb8af;
            box-shadow: none;
            border-radius: 0;
            width: 150px;
        }

        :deep .el-input__inner {
            color: white !important;
            font-size: 16px;
        }
    }
}

.bottom-right {
    width: 1216px;
    padding: 16px;
    box-sizing: border-box;

    .map-box {
        height: 555px;
        margin-bottom: 20px;
    }

    .table-box {

        .table-left {
            position: relative;
            flex-shrink: 0;
            width: 430px;
            height: 256px;
            background: url('../../assets/images/info-r.png') no-repeat;
            background-size: 100% 100%;
            padding: 16px;
            box-sizing: border-box;

            .evaTotal {
                position: absolute;
            }

            .title-box {
                display: flex;
                align-items: center;
                font-size: 16px;
                justify-content: space-between;
                color: white;
            }

            .title-left {
                display: flex;
                align-items: center;
            }

            .user-image {
                display: block;
                width: 30px;
                height: 30px;
                flex-shrink: 0;
                margin-right: 8px;
            }

        }

        .tbale-right {
            flex: 1;
            height: 256px;
        }
    }
}

.demo-ruleForm {
    :deep .el-select {
        width: 100%;
    }

    // .button-box {
    //     width: 100%;
    // }
}
</style>